<template>
  <van-nav-bar title="个人中心" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <div class="user_info">
    <div class="info">
      <img src="../../assets/头像.png" alt="" />
      <div class="user_content">
        <p>
          <span>昵称：</span>
          <span>{{ userdata.nickName }}</span>
        </p>
        <p>
          <span>登录名：</span>
          <span>{{ userdata.loginName }}</span>
        </p>
        <p>
          <span>个性签名：</span>
          <span>{{ userdata.introduceSign }}</span>
        </p>
      </div>
    </div>
  </div>
  <ul>
    <li @click="gomyorder">
      <span>我的订单</span>
      <van-icon name="arrow" />
    </li>
    <li @click="gomyusereidt">
      <span>账号管理</span>
      <van-icon name="arrow" />
    </li>
    <li @click="gomyaddress">
      <span>地址管理</span>
      <van-icon name="arrow" />
    </li>
    <li @click="gomyabout">
      <span>关于我们</span>
      <van-icon name="arrow" />
    </li>
  </ul>
</template>
<script setup>
import { getuser } from "@/api/index.js";
import { onMounted, reactive } from "vue";
import {useRouter} from "vue-router"
let router=useRouter()
let userdata = reactive({
  nickName: "", //昵称
  loginName: "", //登录名
  introduceSign: "", //个性签名
});
onMounted(() => {
  getuserdata();
});
let getuserdata = () => {
  getuser().then((res) => {
    if (res.resultCode == 200) {
      userdata.nickName = res.data.nickName;
      userdata.loginName = res.data.loginName;
      userdata.introduceSign = res.data.introduceSign;
    }
  });
};
//前往我的订单
let gomyorder=()=>{
    router.push("/order")
    
}
//前往账号管理
let gomyusereidt=()=>{
    router.push("/usermgment")
}
//前往地址管理
let gomyaddress=()=>{
    
    router.push("/addresslist?type=0")
}
//前往关于我们
let gomyabout=()=>{
    router.push("/about")
}
</script>

<style lang="less" scoped>
.user_info {
  position: absolute;
  top: 1.46667rem;
  left: 0.29333rem;
  width: 94%;
  height: 3.06667rem;
  background: -webkit-linear-gradient(left, #1baeae, #51c7c7);
  background: linear-gradient(90deg, #1baeae, #51c7c7);
  box-shadow: 0 0.05333rem 0.13333rem #269090;
  border-radius: 0.16rem;
  .info {
    padding: 0.66667rem 0.53333rem;
    width: 100%;
    height: 100%;
    padding: 0.66667rem 0.53333rem;
    box-sizing: border-box;
    display: flex;
    justify-items: start;
    img {
      width: 1.6rem;
      height: 1.6rem;
    }
    .user_content {
      padding-left: 0.18667rem;
      font-size: 0.37333rem;
      color: #fff;
    }
  }
}
ul {
  position: absolute;
  top: 5.06667rem;
  left: 50%;
  transform: translate(-50%);
  width: 85%;
  li {
    height: 1.06667rem;
    line-height: 1.06667rem;
    border-bottom: 0.02667rem solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.37333rem;
  }
}
</style>
